<template>
    <div class="like">
            <div class="py-container">
                <div class="title">
                    <h3 class="fl">猜你喜欢</h3>
                    <span class="fr tip changeBnt" @click="changeGindex()">换一换</span>
                </div>
                <div class="bd">
                    <ul class="favourate">
                        <li v-for="(goods,index) in commodityList.slice(Gindex,Gindex+6)" :key="index">
                            <img :src="goods.goodsImg" alt="" />
                            <div class="like-text">
                                <p>{{goods.goodsName}}</p>
                                <h3>当前价:¥{{goods.maxPrice}}</h3>
                            </div>
                        </li>
                        <!-- <li>
                            <img src="./images/like_03.png" alt="" />
                            <div class="like-text">
                                <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                                <h3>当前价:¥116.00</h3>
                            </div>
                        </li>
                        <li>
                            <img src="./images/like_01.png" alt="" />
                            <div class="like-text">
                                <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                                <h3>当前价:¥116.00</h3>
                            </div>
                        </li>
                        <li>
                            <img src="./images/like_02.png" alt="" />
                            <div class="like-text">
                                <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                                <h3>当前价:¥116.00</h3>
                            </div>
                        </li>
                        <li>
                            <img src="./images/like_03.png" alt="" />
                            <div class="like-text">
                                <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                                <h3>当前价:¥116.00</h3>
                            </div>
                        </li>
                        <li>
                            <img src="./images/like_01.png" alt="" />
                            <div class="like-text">
                                <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                                <h3>当前价:¥116.00</h3>
                            </div>
                        </li> -->
                    </ul>
                </div>
            </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'Like',
    props:['commodityList'],
    data() {
        return {
            search:[],
            Gindex:0
        }
    },
    mounted() {
        this.getSearch()
    },
    methods: {
        changeGindex(){
            // console.log(this.commodityList.length)
            this.Gindex = Math.floor(Math.random()*(this.commodityList.length-6))
        },
        /*
            //------思路--------
            ---综合---
            1、获取所有用户的搜索关键词--统计出关键词最多的那一类
            2、获取所有商品的名和对应的类别
            3、通过判断统计出的关键词是否在商品名或者类名中从而得到所有对应的商品-放到新的数组对象中
            4、随机输出5个数据展示
            ---对应用户--
            改变 1、获取对应用户的搜索关键词--统计(本地存储Token)
            后面几步类似
        */
        //获取所有搜索
        getSearch(){
            axios.get("http://localhost:8080/api/getUserSearch/getUserSearchlist",{
              params:{
                id:1
              }
            }).then(
              res=>{
                this.search = res.data
                console.log("999",res)
                console.log("获取的所有关键字为:",this.search)
              }
            )
        },
        //获取所有的商品
        getAllGoods(){
            axios.get("http://localhost:8080/api/getAllGoods/getAllGoodslist",{
              params:{
                id:1
              }
            }).then(
              res=>{
                this.allData = res.data
                this.tableData = this.allData
                console.log("999",res)
                console.log(this.tableData)

              },
              error=>{
                console.log("88",error.message)
              }
            )
        },
    },
}
</script>

<style lang="less" scoped>
    .like {
        margin-top: 15px;
        width: 1920px;

        .py-container {
            width: 1200px;
            margin: 0 auto;

            .title {
                overflow: hidden;
                background-color: #fff;
                border-bottom: red solid 2px;
                padding-left: 20px;

                .fl {
                    float: left;
                    font-size: 20px;
                    line-height: 30px;
                    font-family: "楷体";
                    font-weight: bold;
                }

                .fr {
                    float: right;
                    background-image: url(./images/icons.png);
                    width: 66px;
                    height: 25px;
                    background-position: 182px -104px;
                    line-height: 30px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #666;
                    text-decoration: none;
                }
            }

            .bd {
                background-color: #fff;

                .favourate {
                    border: 1px solid #e4e4e4;
                    overflow: hidden;
                    padding: 0 10px;
                    box-sizing: border-box;
                    display: flex;

                    li {
                        height: 250px;
                        margin: 0 -1px;
                        overflow: hidden;
                        background: #fff;
                        position: relative;
                        width: 16.667%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        cursor: pointer;

                        img {
                            width: 142px;
                            height: 142px;
                            transition: all 400ms;

                            &:hover {
                                opacity: 0.8;
                                transform: scale(1.1)
                            }
                        }

                        .like-text {
                            padding: 0;
                            width: 142px;
                            border-right: 1px solid #e4e4e4;

                            p {
                                margin: 5px 0;
                                font-size: 12px;
                            }

                            h3 {
                                color: #df3033;
                                font-size: 20px;
                                line-height: 30px;
                                margin: 9px 0;
                                font-weight: 700;
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>